<template>
  <div :class="['aside',shrinkFlag?'asideBig':'asideSmall']">
    <div @click="shrinkFun,firstFlagFun('false')" class="bigSmallPart">
      <div class="img">
        <i class="iconfont icon-menu"></i>
      </div>
    </div>
    <div class="listPart" @click.stop="firstFlagFun('false')">
      <div class="ul" :style="{'height':(H-48-38-60)+'px'}">
        <div :class="['li',indexCurrent?'on':'']" @click="toIndex">
          <div class="single">
            <i class="iconfont icon-zhuye1"></i>
          </div>
          <p class="s1" :style="{'top':'90px'}">主页</p>
        </div>
        <template v-if="secondList && secondList.length>=1">
          <div
            v-for="(menu,index) in secondList"
            :key="index"
            @click.stop="handleRoute(menu,''),firstFlagFun('false')"
            class="line"
          >
            <template v-if="menu.children && menu.children.length>=1">
              <div class="li" v-show="shrinkFlag" @click.stop="firstFlagFun('false')">
                <p class="fontWeight">{{menu.name}}</p>
              </div>
              <div
                v-for="(menu01,ind01) in menu.children"
                :key="ind01"
                @click.stop="handleRoute(menu01,menu),firstFlagFun('false')"
                @mouseover="mouseOverFun"
              >
                <template v-if="menu01.children && menu01.children.length>=1">
                  <div :class="['li','li1',menu01.current?'on':'']">
                    <div class="single">
                      <i class="iconfont icon-caidan"></i>
                    </div>
                    <p class="s1" :style="{'top':positionY+'px'}">{{menu01.name}}</p>
                  </div>
                  <div
                    v-for="(menu02,ind02) in menu01.children"
                    :key="ind02"
                    @click.stop="handleRoute(menu02,menu),firstFlagFun('false')"
                    :class="['li','li2',menu02.current?'on':'']"
                  >
                    <div class="single">
                      <i class="iconfont icon-xiayiye"></i>
                    </div>
                    <p class="s1" :style="{'top':positionY+'px'}">{{menu02.name}}</p>
                  </div>
                </template>
                <template v-else>
                  <div :class="['li','li1',menu01.current?'on':'']">
                    <div class="single">
                      <i class="iconfont icon-caidan"></i>
                    </div>
                    <p class="s1" :style="{'top':positionY+'px'}">{{menu01.name}}</p>
                  </div>
                </template>
              </div>
            </template>
            <template v-else>
              <div class="li">
                <div class="single">
                  <i class="iconfont icon-caidan"></i>
                </div>
                <p class="s1" :style="{'top':positionY+'px'}">{{menu.name}}</p>
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>
    <div
      :class="['firstPart',firstFlag?'firstDetailShow':'']"
      :style="{'width':(WIDTH-1)+'px'}"
      v-if="list && list.length >= 1"
    >
      <ul class="firstDetail" v-show="firstFlag">
        <li
          v-for="(item,index) in list"
          :key="index"
          @click="getFirst(item,index)"
          class="selectItem"
          :class="item.checked?'active':''"
        >
          <template v-for="(ele,ind) in imgs">
            <template v-if="item.icon == ele.name">
              <img :src="ele.img01" class="img01" alt :key="ind+'111'" />
              <img :src="ele.img02" class="img02" alt :key="ind+1" />
            </template>
          </template>
          {{item.name}}
        </li>
      </ul>
      <div
        class="item"
        :style="{'width':(WIDTH-16)+'px'}"
        @click.stop="firstFlagFun('true')"
      >
        <div class="word">{{firstName.slice(0,1)}}</div>
        <div class="flex" v-show="shrinkFlag">
          <p class="txt">{{firstName}}</p>
          <i class="iconfont icon-shangxiajiantou"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getIFrameUrl, getIFramePath } from "@/utils/iframe";
import { getBreadName } from "@/utils/index";
export default {
  props:{
    firstFlag:{
      type:Boolean,
      default:false
    }
  },
  computed: {
    ...mapState({
      navTree: state => state.menu.navTree,
      indexCurrent: state => state.menu.indexCurrent
    }),
    mainTabs: {
      get() {
        return this.$store.state.tab.mainTabs;
      },
      set(val) {
        this.$store.commit("updateMainTabs", val);
      }
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.tab.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("updateMainTabsActiveName", val);
      }
    }
  },
  data() {
    return {
      W: 200,
      WIDTH: 200,
      H: window.innerHeight,
      list: [], //所有菜单
      firstDetailFlag: false, //是否显示第一层菜单
      firstName: "", //第一层菜单
      secondList: [], //第二层菜单
      shrinkFlag: true,
      positionY: 0, //菜单hover时距离top的位置
      imgs: [
        {
          name: "peizhi",
          img01: require("../../assets/icon/peizhi.png"),
          img02: require("../../assets/icon/peizhi-2.png")
        },
        {
          name: "zuzhi",
          img01: require("../../assets/icon/zuzhi.png"),
          img02: require("../../assets/icon/zuzhi-2.png")
        },
        {
          name: "shangpin",
          img01: require("../../assets/icon/shangpin.png"),
          img02: require("../../assets/icon/shangpin-2.png")
        },
        {
          name: "dingdan",
          img01: require("../../assets/icon/dingdan.png"),
          img02: require("../../assets/icon/dingdan-2.png")
        },
        {
          name: "fenxiao",
          img01: require("../../assets/icon/fenxiao.png"),
          img02: require("../../assets/icon/fenxiao-2.png")
        },
        {
          name: "huiyuan",
          img01: require("../../assets/icon/huiyuan.png"),
          img02: require("../../assets/icon/huiyuan-2.png")
        },
        {
          name: "yingxiao",
          img01: require("../../assets/icon/yingxiao.png"),
          img02: require("../../assets/icon/yingxiao-2.png")
        },
        {
          name: "shuju",
          img01: require("../../assets/icon/shuju.png"),
          img02: require("../../assets/icon/shuju-2.png")
        },
        {
          name: "caigouche",
          img01: require("../../assets/icon/caigouche.png"),
          img02: require("../../assets/icon/caigouche-2.png")
        },
        {
          name: "jinbi",
          img01: require("../../assets/icon/jinbi.png"),
          img02: require("../../assets/icon/jinbi-2.png")
        }
      ]
    };
  },
  methods: {
    init(val) {
      val.forEach(element => {
        this.$set(element, "checked", false);
      });
      this.list = val;
      if (this.list && this.list.length >= 1) {
        this.firstName = this.list[0].name; //默认取第一个菜单
        this.list[0].checked = true; //默认第一个菜单被选中
        this.secondList = this.list[0].children;
      }
    },
    //选择第一层菜单
    getFirst(item, index) {
      this.firstName = item.name;
      this.list.forEach(element => {
        element.checked = false;
      });
      item.checked = true;
      this.firstDetailFlag = false;
      this.secondList = this.list[index].children;
    },
    handleRoute(menu, item) {
      //如果有子children,例如当前二级不可点击
      if (menu.children.length > 0) {
        return;
      }
      // 如果是嵌套页面，转换成iframe的path
      let path = getIFramePath(menu.url);
      if (!path) {
        path = menu.url;
      }
      // 在当前页面不可再次点击
      if (this.screenTab() == "/" + path) {
        return;
      }
      // 通过菜单URL跳转至指定路由current
      this.$router.push("/" + path);
      if (path == "/") {
        this.$store.commit("setIndexCurrent", true);
        this.$store.commit(
          "setBreadName",
          JSON.stringify({ firstName: "首页" })
        );
      } else {
        this.$store.commit("setIndexCurrent", false);
        getBreadName("/" + path);
      }
    },
    //收缩 菜单
    shrinkFun() {
      this.shrinkFlag = !this.shrinkFlag;
      this.WIDTH = this.shrinkFlag ? "200" : "45";
      this.$emit("parentWidth", this.WIDTH);
      this.$emit("setFirstFlag",false)
    },
    toIndex() {
      this.$router.push("/");
      this.$store.commit("setIndexCurrent", true);
      this.$store.commit("setBreadName", JSON.stringify({ firstName: "首页" }));
      this.setMenu();
    },
    //获取当前url
    screenTab() {
      let param = this.$store.state.tab;
      let url = "";
      if (param && param.mainTabs.length > 0) {
        param.mainTabs.forEach(f => {
          if (param.mainTabsActiveName == f.name) {
            url = f.path;
          }
        });
      }
      return url;
    },

    //修改class选中的current值
    setMenu() {
      this.navTree.forEach(f => {
        f.children.forEach(ele => {
          ele.children.forEach(item => {
            item.current = false;
          });
        });
      });
      return this.navTree;
    },
    //菜单hover样式的top
    mouseOverFun(event) {
      this.positionY = event.clientY;
    },
    firstFlagFun(params){
      let val = false;
      if(params=='false'){
        val = false;
      }else{
        val = true;
      }
      this.$emit("setFirstFlag",val)
    }
  },
  watch: {
    //加默认勾选
    navTree(val) {
      val.forEach(element => {
        this.$set(element, "checked", false);
      });
      this.list = val;
      if (this.list && this.list.length >= 1) {
        this.firstName = this.list[0].name; //默认取第一个菜单
        this.list[0].checked = true; //默认第一个菜单被选中
        this.secondList = this.list[0].children;
      }
    }
  },
  mounted() {
    this.init(this.navTree);
    let path = this.mainTabs[0].path;
    if (path == "/") {
      this.$store.commit("setIndexCurrent", true);
      this.$store.commit("setBreadName", JSON.stringify({ firstName: "首页" }));
    } else {
      this.$store.commit("setIndexCurrent", false);
      getBreadName(path);
    }
    console.log(this.firstFlag)
  }
};
</script>
<style scoped lang="scss">
.aside {
  height: 100%;
  background: #eff2fb;
  font-size: 14px;
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .fontWeight {
    padding-left: 8px;
    font-weight: bold;
    color: #405089;
  }
  img {
    width: 100%;
    height: 100%;
  }
  //收缩放大按钮
  .bigSmallPart {
    padding: 6px;
    cursor: pointer;
    .img {
      width: 32px;
      padding: 6px 0;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        color: #405089;
      }
      &:hover {
        background: #fff;
      }
      img {
        width: 60%;
        height: 60%;
      }
    }
  }

  //二级三级滚动部分
  .listPart {
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .li {
      width: 100%;
      position: relative;
      padding: 3px 0;
      height: 28px;
      line-height: 28px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      color: #666;
      &:hover {
        color: #333;
      }
      &.on {
        color: #25a4e4;
      }
      .single {
        width: 28px;
        margin: 8px;
        border-radius: 2px;
        flex-shrink: 0;
      }
      &.li2 {
        padding-left: 8px;
      }
      p {
        padding-right: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .firstPart {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 8px 0;
    border-top: 1px solid #d8d8d8;
    z-index: 9999;
    background: #efefef;
    &.firstDetailShow {
      background: #fff;
    }
    .word {
      width: 28px;
      height: 28px;
      background: #c2530a;
      color: #fff;
      margin: 0;
      flex-shrink: 0;
      font-size: 12px;
      border-radius: 2px;
    }
    .item {
      position: relative;
      height: 28px;
      line-height: 28px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      margin: 0 auto;
      .flex {
        width: 100%;
        margin: 0 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      &:hover {
        background: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }
    }
    .firstDetail {
      width: 199px;
      background: #fff;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 8px;
      z-index: 9999;
      li {
        height: 35px;
        line-height: 35px;
        text-align: left;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        font-size: 16px;
        .img01 {
          display: block;
        }
        .img02 {
          display: none;
        }
        &:hover,
        &.active {
          background: #415185;
          color: #fff;
          .img01 {
            display: none;
          }
          .img02 {
            display: block;
          }
        }
        img {
          width: 18px;
          height: 18px;
          margin: 8px;
        }
      }
    }
  }
  //缩小
  &.asideSmall {
    .line {
      border-top: 1px solid #d8d8d8;
    }
    .fontWeight {
      display: none;
    }
    .firstDetailShow {
      .firstDetail {
        width: 199px;
        position: fixed;
        bottom: 0;
        left: 45px;
        margin: 0;
      }
      background: #fff;
    }
    //此部分为hover上去效果,但是没有实现,因为上面的宽限制了
    .listPart {
      .li {
        &:hover {
          .s1 {
            display: block;
          }
        }
        .s1 {
          display: none;
          position: fixed;
          left: 45px;
          top: 0;
          z-index: 9999;
          background-color: #fff;
          height: 35px;
          line-height: 35px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          text-align: left;
          margin: 0;
          padding: 0 10px;
        }
      }
    }
  }
}
</style>
